<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Digital Human with Video.js</title>
    <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet"/>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f0f0f0;
        }

        .digital-human {
            position: relative;
            width: 90vw; /* 使用相对宽度以适应各种设备 */
            max-width: 360px; /* 最大宽度，防止过大 */
            height: 60vh; /* 高度相对视口的高度 */
            max-height: 640px; /* 最大高度，防止过大 */
            background: transparent; /* 保持透明背景 */
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .video-js {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent; /* 保持视频背景透明 */
        }

        .mute-button {
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-image: url('https://sjzz.ilhjy.cn/uimg/202405/14/1715651036930_3480.png');
            background-size: cover;
            background-position: center;
            cursor: pointer;
            animation: pulse 2s infinite; /* 添加脉冲动画 */
        }

        /* 添加引导动画 */
        @keyframes pulse {
            0% {
                transform: translate(-50%, -50%) scale(1); /* 初始大小 */
            }
            50% {
                transform: translate(-50%, -50%) scale(1.2); /* 放大 */
            }
            100% {
                transform: translate(-50%, -50%) scale(1); /* 还原 */
            }
        }
    </style>
</head>
<body>
<div class="digital-human">
    <video id="my-video" class="video-js" controls autoplay muted preload="auto" playsinline disablePictureInPicture
           webkit-playsinline>
        <source src="assets/video/1717658488515_3480.webm" type="video/webm"/>
        Your browser does not support the video tag.
    </video>
    <!-- 声音开关按钮 -->
    <div id="mute-btn" class="mute-button"></div>
</div>

<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
<script>
    // 判断是否为微信浏览器 微信浏览器不能自动播放需要特殊处理
    const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
    const muteBtn = document.getElementById('mute-btn');
    if (isWeChat) {
        // 非微信浏览器额外逻辑（如果需要）
        muteBtn.style.display = 'none'; // 点击后隐藏div
    }

    const player = videojs('my-video', {
        controls: isWeChat, // 如果是微信浏览器则显示控制栏
        autoplay: true,
        muted: true,
        loop: true, // 如果需要循环播放视频
        disablePictureInPicture: true // 禁用画中画
    });
    // 切换静音和播放声音
    muteBtn.addEventListener('click', () => {
        if (player.muted()) {
            player.muted(false); // 取消静音
            muteBtn.style.display = 'none'; // 点击后隐藏div
        } else {
            player.muted(true); // 静音
        }
    });
</script>
</body>
</html>
